<template>
  <div class="find-pass">
    <div class="find-pass-content">
      <div class="find-pass-steps">
        <div class="find-pass-step" :class="{ active: step >= 1 }">
          <div class="step-graph">
            <div class="step-graph-bg"></div>
            <div class="step-graph-circle"><i class="el-icon-success"></i></div>
          </div>
          <div class="step-text">验证身份</div>
        </div>
        <div class="find-pass-step" :class="{ active: step >= 2 }">
          <div class="step-graph">
            <div class="step-graph-bg"></div>
            <div class="step-graph-circle"><i class="el-icon-success"></i></div>
          </div>
          <div class="step-text">修改密码</div>
        </div>
        <div class="find-pass-step" :class="{ active: step >= 3 }">
          <div class="step-graph">
            <div class="step-graph-bg"></div>
            <div class="step-graph-circle"><i class="el-icon-success"></i></div>
          </div>
          <div class="step-text">修改成功</div>
        </div>
      </div>
      <div class="find-pass-form">
        <Step1 v-if="step === 1" @success="handleSuccess" />
        <Step2
          v-if="step === 2"
          :verifyData="verifyData"
          @success="handleSuccess"
        />
        <Step3 v-if="step === 3" />
      </div>
    </div>
  </div>
</template>

<script>
import Step1 from './Step1'
import Step2 from './Step2'
import Step3 from './Step3'
export default {
  name: 'FindPass',
  components: { Step1, Step2, Step3 },
  data() {
    return {
      step: 1,
      verifyData: null
    }
  },
  methods: {
    handleSuccess(data) {
      this.step++
      this.verifyData = data
    }
  }
}
</script>

<style lang="scss">
@import 'styles/common.scss';
.find-pass {
  padding: 1.95rem 0;
  .find-pass-content {
    margin: 0 auto;
    width: 14.6rem;
    background-color: #fff;
    border-radius: 0.16rem;
    text-align: center;
    position: relative;
    padding: 0.61rem 1.81rem;
    .find-pass-steps {
      width: 100%;
      display: flex;
      .find-pass-step {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        .step-graph {
          width: 100%;
          height: 42px;
          position: relative;
          .step-graph-bg {
            @include absoluteCenter();
            width: 100%;
            height: 7px;
            background: #e6e6e6;
          }
          .step-graph-circle {
            @include absoluteCenter();
            width: 30px;
            font-size: 42px;
            color: #e6e6e6;
            background-color: #fff;
            i {
              position: relative;
              left: -6px;
            }
          }
        }
        .step-text {
          margin-top: 0.23rem;
          font-size: 20px;
          color: $colorText1;
        }
        &.active {
          .step-graph-bg {
            background: #ffb41a;
            height: 10px;
            // border-radius: 5px;
          }
          .step-graph-circle {
            color: #ffb41a;
          }
        }
      }
    }
  }
  .find-pass-form {
    padding: 0.62rem 2.79rem 0;
  }
}
</style>
